<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <script>
     window.onload=function(){
$("#mycarousel").carousel() 
     }
 </script>
</head>
<body>
    <!--头部菜单-->
    <nav class="navbar navbar-default" id="header">
    <div class="container-fluid">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target="#example">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <h1>大黑盒</h1>
        </div>
           <div class="navbar-collapse collapse pull-right" id="example" >
               <ul class="nav navbar-nav">
                   <li class="link"><a href="index.html">首页</a></li>
                   <li class="link"><a href="about.html" >创始人</a></a></li>
                   <li class="link"><a href="hotnews.html">热门游戏</a></li>
                   <li class="link"><a href="login.html">会员</a></li>
                   <li class="link"><a href="login.html">登陆</a></li>
               </ul>
           </div>
    </div>

    </nav>





    <!--轮播图-->
    <div class="carousel slide" id="mycarousel">
        <ol class="carousel-indicators">
            <li class="active" data-slide-to="0" data-target="#mycarousel"></li>
            <li  data-slide-to="1" data-target="#mycarousel"></li>
            <li data-slide-to="2" data-target="#mycarousel"></li>
            <li data-slide-to="3" data-target="#mycarousel"></li>
        </ol>
        <div class="carousel-inner"> 
            <div class="active item">
               <img src="img/jieju.png">
                  <h3 class="carousel-caption">标题一</h3>
            </div>
            <div class="item">
                <img src="img/wushi.webp">
                   <h3 class="carousel-caption">标题二</h3>
             </div>
             <div class="item">
                <img src="img/zhandiwu2.webp">
                   <h3 class="carousel-caption">标题三</h3>
             </div>
             <div class="item">
                <img src="img/zhilang1.webp">
                   <h3 class="carousel-caption">标题四</h3>
             </div>
        </div>
    </div>

</div>




<!--正文-->
<div class="content">
<div class="item">
    <h1>最多人玩</h1>
    <div class="row" id="newsdy">
        <div class="col-md-6 col-sm-12">
            <img src="img/xiaoguang.jpg" class="thumbnail">
        </div>
<div class="col-md-6 col-sm-12">
<h3 class="">消失的光芒2：人与仁之战</h3>
<p>二十几年前，我们在哈兰和病毒抗争，但失败了。现在，我们即将再次面临失败。作为人类最后一处大型定居点之一，"都市"正因冲突而四分五裂。文明退回了黑暗时代。不过，我们仍有希望。 [2] 
    你是一名有力量改变城市命运的游荡者。但你的卓越才能是有代价的。无法理解的回忆一直困扰着你，于是你出发寻求真相……结果发现自己来到了战区。磨炼你的技艺。你需要武勇与智慧才能击败敌人以及结交盟友。揭露掌权者幕后见不得人的秘密，选择阵营，并决定你的命运。但无论做出怎样的选择，你绝不能忘记一件事——保留自己的人性。</p>
    <div class="clearfix" ><span class="pull-left">售价299~499 RMB</span><span class="pull-right">丧尸</span>&nbsp;<span class="pull-right">联机</span>&nbsp;<span class="pull-right">生存</span>&nbsp;<span class="pull-right">探索</span></div>
    <button type="button" class="btn btn-default btn-lg">详情介绍</button>
</div>
    </div>
</div>
</div>






<div class="content">
   <div class="item">
         <h1>热门游戏</h1>
         <div class="row" id="rednews">


             <div class="col-md-2 col-sm-4">
<img src="img/yizhong1.jpg" class="img-responsive">
<h4>彩虹六号：异种</h4>
<div>
    
    <p class="font">发售时间：2021.12.30</p>
</div>
             </div>

 
             <div class="col-md-2 col-sm-4">
                <img src="img/shuangrenchengxing.png" class="img-responsive">
                <h4>双人成行</h4>
                <div>
                   
                    <p class="font">发售时间：2021.12.30</p>
                </div>
                             </div>     



             <div class="col-md-2 col-sm-4">
<img src="img/yinglingshendain.png" class="img-responsive">
<h4>英灵神殿</h4>
<div>
   
    <p class="font">发售时间：2021.12.30</p>
</div>
             </div>



             <div class="col-md-2 col-sm-4">
<img src="img/zhilang.jpeg" class="img-responsive">
<h4>只狼：影逝二度</h4>
<div>
    
    <p class="font">发售时间：2021.12.30</p>
</div>
             </div>



             <div class="col-md-2 col-sm-4">
<img src="img/shenyanyinghe.jpg" class="img-responsive">
<h4>深岩银河</h4>
<div>
 
    <p class="font">发售时间：2021.12.30</p>
</div>
             </div>

             <div class="col-md-2 col-sm-4">
<img src="img/daozei2.webp" class="img-responsive">
<h4>盗贼之海</h4>
<div>
   
    <p class="font">发售时间：2021.12.30</p>
</div>
             </div>
                            
         </div>
   </div>



   <div class="item">
    <h1>畅销游戏</h1>
    <div class="row" id="newsdsj1">
    <div class="col-md-4 col-sm-12">
        <img src="img/wushi.webp" class="img-thumbnail">
      <div> <h4>巫师三：狂猎</h4>
        <p>开放世界探索游戏</p></div>
    </div>
    
    <div class="col-md-4 col-sm-12">
        <img src="img/yibaitudi.webp" class="img-thumbnail">
        <div>   <h4>人类一败涂地</h4>
        <p>多人闯关游戏</p></div>
        </div>
      

    <div class="col-md-4 col-sm-12">
        <img src="img/pohuaizhe.webp" class="img-thumbnail">
        <div>   <h4>城堡破坏者</h4>
        <p>多人闯关游戏</p></div>
        </div>
        </div>

    <div class="row" id="newsdsj2">
        <div class="col-md-4 col-sm-12">
            <img src="img/jinbiqiusheng.webp" class="img-thumbnail">
            <div>   <h4>禁闭求生</h4>
            <p>多人生存建造游戏</p></div>
            </div>
          
      
        <div class="col-md-4 col-sm-12" >
            <img src="img/yxlm.webp" class="img-thumbnail">
            <div>   <h4>英雄联盟</h4>
            <p>多人竞技游戏</p></div>
            </div>
          
     
        <div class="col-md-4 col-sm-12">
            <img src="img/zhandiwu.webp" class="img-thumbnail">
        <div>  <h4>战地五</h4>
            <p>军事竞技游戏</p></div>
            </div>     
    </div>
</div>
</div>

   
       
 
    












<!--尾部-->
    <div class="footer">
        <ul class="nav nav-pills nav-justified" >
            <li><a href="#">Steam平台</a></li>
            <li><a href="#">小黑盒</a></li>
            <li><a href="#">Xbox会员</a></li>
            <li><a href="#">EA平台</a></li>
            <li><a href="#">橘子平台</a></li>
        </ul>
        <div class="row">
             <div class="col-md-6 col-sm-12">
                <p>邮箱:131513515@163.com</p>
                <p>公司地址：美国</p>
                <p>约瑟夫·法里斯（Josef Fares）@版权所有</p>
             </div>
             <div class="col-md-6 col-sm-12">
                   <img src="img/erweima.jpg" >
             </div>
        </div>
    </div>
</body>
</html>